<template>
	<div class="form-rules-one-container">
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange">
			<el-table-column label="预约卡项" width="80">
				<template #default="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="卡项数量">
				<template #default="scope">
					<span>卡项数量</span>
				</template>
			</el-table-column>
			<el-table-column label="服务时长">
				<template #default="scope">
					<span>规格</span>
				</template>
			</el-table-column>
			<el-table-column label="开始时间">
				<template #default="scope">
					<span>属性</span>
				</template>
			</el-table-column>
			<el-table-column label="结束时间">
				<template #default="scope">
					<span>剩余数量</span>
				</template>
			</el-table-column>
			<el-table-column label="预约类型">
				<template #default="scope">
					<span>剩余次数/时间</span>
				</template>
			</el-table-column>
			<el-table-column label="预约员工">
				<template #default="scope">
					<span>可用次数</span>
				</template>
			</el-table-column>
			<el-table-column label="审核状态">
				<template #default="scope">
					<span>欠款金额</span>
				</template>
			</el-table-column>
			<el-table-column label="到店情况">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
			<el-table-column label="预留车位">
				<template #default="scope">
					<span>欠款金额</span>
				</template>
			</el-table-column>
			<el-table-column label="预约时间">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" width="100">
				<template #default="scope">
					<span>大大</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-footer mt15" style="display: flex; justify-content: flex-end;">
			<el-pagination v-model:current-page="state.param.pageNum" v-model:page-size="state.param.pageSize"
				:pager-count="5" :page-sizes="[10, 20, 30]" :total="state.total"
				layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script setup lang="ts" name="pagesFormRulesOne">
import { reactive, onMounted } from 'vue';
import type { saleOrderListData, } from "/@/types/order";
import { orderQuery } from "/@/api/order";


// 定义父组件传过来的值
const props = defineProps({
	data: {
		type: Number,
		default: () => { },
	},
});

// 定义变量内容
const state = reactive({
	loading: false,
	param: {
		type: 0,
		pageNum: 1,
		pageSize: 10,
	},
	total: 0,
	tableData: [] as Array<saleOrderListData>
});

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;
	const { results } = await orderQuery(state.param);
	state.loading = false;
	state.tableData = results.records.slice(0,1);
	state.total = results.total;
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 赋值回显
const initForm = () => {
	state.param.type = props.data;
	getOrderList();
};
// 页面加载时
onMounted(() => {
	initForm();
});
</script>
